<template>
  <div>
    <el-carousel   height="calc(100vh - 60px) " direction="vertical">
    <el-carousel-item  v-for="item in Product" :key="item.id">
        <img class="product_cover" :src="'http://localhost:3000'+item.cover" alt="">
        <div class="div3">
            <h3>产品名称</h3>
            <span class="font_title">{{ item.title }}</span>
            <br>
            <span>{{ Store.editTime(item.editTime) }}</span>
            <hr style="margin:20px 0 ;">
            <h3>简要描述</h3>
            <span class="font_introduction">{{ item.introduction }}</span>
            <hr style="margin:20px 0 ;">
            <h3>详细描述</h3>
            <span class="font_detail">{{ item.detail }}</span>
        </div>
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script setup>
import {getallproduct} from '@/request/home/userapi.js'
import { onMounted,ref } from 'vue'
import { useStore } from '../../../stores/counter';
const Product = ref()
const Store = useStore()
onMounted(async ()=>{
  const result =await getallproduct()
  Product.value=result.data.result
  console.log(Product.value);
})
</script>

<style scoped>
h3{
  margin-bottom:10px ;
}

.div3{
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}
.product_cover{
  height: 100%;
  width: 100%;
  object-fit:cover;
}
.font_title{
  color:    rgb(255, 255, 255);
  font-weight: 900;
  font-family:'Courier New', Courier, monospace;
  font-size: 0.8rem;
  text-shadow: 2px 2px 0 rgb(134, 133, 133),
  4px 4px 0 rgb(190, 188, 188),
  6px 6px 0 rgb(233, 231, 231);
  margin-left:20px ;
  width: 100%;
}
.font_introduction{
  font-size: 0.4rem;
  margin-left:20px ;
  color: black;
}
.font_detail{
  font-size: 0.3rem;
  margin-left:20px ;
  color: black;
}
@media (max-width: 750px) {
  .product_cover{
    height: auto;
  }
  .div3{
    width: 100%;
    position: static;
    background:  rgba(62, 147, 218, 0.3);
  }
  
}
</style>